<template>
  <div>
    <h1>Vuex 入门学习   ---  {{newCount}}</h1>
    <div v-if="data.flag">
      <h2>
        count -- {{ count }} --{{ count2 }} -- {{ count3 }} -- {{ count4 }}
      </h2>
      <h2>city -- {{ city }}</h2>
      <h2>word -- {{ word }}</h2>
      <h2>msg -- {{ msg1 }}</h2>
      <h2>test --- {{ data.test }}</h2>
      <h3>message --- {{ message }}</h3>
    </div>
    <hr />
    <button @click="countAdd">countAdd</button>
    <button @click="countDesc">countDesc</button>
    <button @click="changeCount(80)">changeCount</button>
    <button @click="changeCity('长沙')">changeCity</button>
    <button @click="changeWord('加油')">changeWord</button>

    <p>
      <input
        type="text"
        name=""
        id=""
        :value="msg1"
        @input="changeMsg($event.target.value)"
      />
    </p>

    <button @click="changeDataFlag(!data.flag)">切换flag</button>
    <button @click="changeDataTest('注意安全')">修改 data - test</button>

    <button @click="changeNum(16)">改变NUM ---{{ num }}</button>
    <button @click="increment">incrementNum -- {{ num }}</button>

    <h1 @click="getNewWord('加油孩子')">修改word - lucky</h1>

    <button @click="getNewTestAsync">获取异步的 test</button>
    <button @click="getNewList">获取异步的List</button>
    <div>
      <h2 v-for="(l, i) in list" :key="i">
        {{ l }}
      </h2>
    </div>
  </div>
</template>


<script>
//因为有全局的

// import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import { COUNTADD } from "../store/types";
import { mapState, mapActions, mapMutations,mapGetters } from "vuex";
export default {
  data() {
    return {
      count: this.$store.state.count,
    };
  },
  computed: {
    // msg2: {
    //   get() {
    //     return this.$store.msg;
    //   },
    //   set(v) {
    //     this.changeMsg(v);
    //   },
    // },
    ...mapGetters(["newCount"]),
    ...mapState({
      count4: (state) => state.count,
      count2: "count",
      count3(state) {
        return state.count + 2000;
      },
      city: "city",
      word: "word",
      msg1: "msg",
      data: "data",
      message: "message",
    }),
    ...mapState(["city", "msg", "word", "data", "message", "num", "list"]),
    //取值  actions
    // count2() {
    //   return this.$store.state.count;
    // },
    // count3: {
    //   get() {
    //     return this.$store.state.count;
    //   },
    // },
    // count4:()=>store.state.count,
    //不依赖this.$store
    // city() {
    //   return this.$store.state.city;
    // },
    // word() {
    //   return this.$store.state.word;
    // },
    // msg1() {
    //   return this.$store.state.msg;
    // },
    // data() {
    //   return this.$store.state.data;
    // },
  },
  methods: {
    ...mapActions([
      "increment", // this.increment = this.$store.dispatch('increment')
      "getNewWord",
      "getNewTestAsync",
      "getNewList",
    ]),
    ...mapMutations({
      changeCity: "changeCityOnce",
      countAdd: COUNTADD,
    }),
    ...mapMutations([
      "countDesc",
      "changeCount",
      "changeWord",
      "changeMsg",
      "changeDataFlag",
      "changeDataTest",
      "changeNum",
    ]),
    //提交
    // countAdd() {
    //   this.$store.commit("countAdd");
    // },
    // countDesc() {
    //   this.$store.commit("countDesc");
    // },
    // changeCount(n) {
    //   this.$store.commit("changeCount", n);
    // },
    // changeCity(city) {
    //   this.$store.commit("changeCityOnce", city);
    // },
    // changeWord(word) {
    //   this.$store.commit("changeWord", word);
    // },
    // changeMsg(msg) {
    //   this.$store.commit("changeMsg", msg);
    // },
    // changeDataFlag(flag) {
    //   this.$store.commit("changeDataFlag", flag);
    // },
    // changeDataTest(test) {
    //   this.$store.commit("changeDataTest", test);
    // },
    // changeNum(num) {
    //   this.$store.commit("changeNum", num);
    // },
    // increment() {
    //   this.$store.dispatch("increment");
    // },
    // getNewWord(word) {
    //   this.$store.dispatch("getNewWord", word);
    // },
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>